<template>
    <div>
        <el-table :data="ticketList" style="width: 100%;">
            <el-table-column label="种类" prop="ticket_zl">
            </el-table-column>
            <el-table-column label="起点" prop="ticket_start">
            </el-table-column>
            <el-table-column label="终点" prop="ticket_end" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="出发时间" prop="ticket_starttime" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="到达时间" prop="ticket_endtime">
            </el-table-column>
            <el-table-column label="票价" prop="ticket_money" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="数量" prop="ticket_number">
            </el-table-column>
            <el-table-column align="right" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="width:50%;margin: 20px auto 0;" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" layout=" prev, pager, next, jumper,total, sizes" :total="total">
        </el-pagination>



        <el-dialog title="信息修改" :visible.sync="dialogFormVisible" width="25%">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="种类" :label-width="formLabelWidth" prop="ticket_zl">
                    <el-input v-model="form.ticket_zl" autocomplete="off" placeholder="票种类"></el-input>
                </el-form-item>
                <el-form-item label="起点" :label-width="formLabelWidth" prop="ticket_start">
                    <el-input v-model="form.ticket_start" autocomplete="off" placeholder="票起点"></el-input>
                </el-form-item>
                <el-form-item label="终点" :label-width="formLabelWidth" prop="ticket_end">
                    <el-input v-model="form.ticket_end" autocomplete="off" placeholder="票终点"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="formLabelWidth" prop="ticket_starttime">
                    <el-input v-model="form.ticket_starttime" autocomplete="off" placeholder="开始时间"></el-input>
                </el-form-item>
                <el-form-item label="到达时间" :label-width="formLabelWidth" prop="ticket_endtime">
                    <el-input v-model="form.ticket_endtime" autocomplete="off" placeholder="到达时间"></el-input>
                </el-form-item>
                <el-form-item label="票价" :label-width="formLabelWidth" prop="ticket_money">
                    <el-input v-model="form.ticket_money" autocomplete="off" placeholder="票价"></el-input>
                </el-form-item>
                <el-form-item label="剩余数量" :label-width="formLabelWidth" prop="ticket_number">
                    <el-input v-model="form.ticket_number" autocomplete="off" placeholder="数量"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api'
export default {
    mounted() {
        this.getTicket();
    },
    data() {
        return {
            pageIndex: 1,
            pageSize: 10,
            total: 10,
            ticketList: [],
            dialogFormVisible: false,
            form: {
                _id: "",
                ticket_zl: "",
                ticket_start: "",
                ticket_end: "",
                ticket_starttime: "",
                ticket_endtime: "",
                ticket_money: "",
                ticket_number: "",
            },
            formLabelWidth: '80px'
        }
    },
    methods: {
        /**获取列表 */
        async getTicket() {
            let res = await api.getTicket({ pageIndex: this.pageIndex, pageSize: this.pageSize })
            if (res?.code == 200) {
                this.ticketList = res.data;
                this.total = res.total
            } else {
                this.ticketList = []
            }
        },
        handleEdit(userInfo) {
            this.dialogFormVisible = true
            this.form = { ...userInfo }
        },
        async handleDelete(_id) {
            let res = await api.delTicket({ _id });
            if (res?.code == 200) {
                this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.getTicket();
            } else {
                this.$message.error(res.message);
            }
        },
        async handleOk() {
            this.dialogFormVisible = false;
            let res = await api.updateTicket({ ...this.form })
            if (res?.code == 200) {
                this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.getTicket();
            } else {
                this.$message.error(res.message);
            }
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getTicket()
        },
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.getTicket()
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleOk();
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
}
</script>

<style lang="scss" scoped></style>